<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-案例：简洁版小米侧边栏</title>
    <style>
        /* 1.把a转换为块级元素 */
        a {
            display: block;
            /* background-color: rgb(255, 103, 0); */
            background-color: rgb(63, 61, 61);
            width: 295px;
            height: 55px;
            font-style: 14px;
            color: rgb(250, 250, 250);
            text-decoration: none;
            text-indent: 2em;
            line-height: 55px;
            /* 文字垂直居中 */
        }
        /* 2.鼠标经过变换颜色 */
        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </style>
</head>

<body>
    <a href="">手机</a>
    <a href="">电视</a>
    <a href="">笔记本 平板</a>
    <a href="">家电</a>
    <a href="">出行穿戴</a>
    <a href="">智能 路由器</a>
    <a href="">电源 配件</a>
    <a href="">健康 儿童</a>
    <a href="">耳机 音箱</a>
    <a href="">生活 箱包</a>

实现方法：
<br>
<img src="img/03案例.png" width="400">
</body>
</html>